<template>
  <div class="container">
    <ul class="message">
      <li class="" v-for="(message, mid) in notices" :key="mid">
        <p class="point"></p>
        <div>
            <h2 class="message-title van-ellipsis">{{message.title}}</h2>
            <p class="message-desc van-ellipsis">{{message.description}}</p>
            <span class="message-date">{{message.date}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Tag, Col, Icon, Cell, CellGroup } from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data () {
    return {
      notices: [
        {
          title: '9月2日小米8新版本惊喜上线1',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        },
        {
          title: '8月8日小米8新版本惊喜上线',
          description: '小米8 8GB大内存新版本领衔 大内高手集结',
          date: '8月8日'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.message {
  padding: 8px 14px;
  margin: 0;
  &-title {
    font-size: 14px;
    color: #424242;
    margin: 0 0 5px;
    font-weight: 500;
  }
  &-desc,
  &-date {
    margin: 0;
    font-size: 11px;
    color: #b0b0b0;
    margin: 5px 0 0;
  }
}

.message li {
  padding: 10px 0 10px 14px;
  position: relative;
}
.message li::before,
.message li::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 50%;
  content: "";
  background: #e0e0e0;
}
.message li::after {
  top: auto;
  bottom: 0;
}
.message li p.point {
  position: absolute;
  left: -5px;
  top: 40%;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #000;
  margin: 0;
  z-index: 1;
}
.message li:first-child::before,
.message li:last-child::after {
  display: none;
}
.message li > div {
  background: #fff;
  padding: 14px;
}

.message li:nth-child(7n + 0) p.point {
  background-color: #ff6b00;
}
.message li:nth-child(7n + 1) p.point {
  background-color: #8ac349;
}
.message li:nth-child(7n + 2) p.point {
  background-color: #9c27b0;
}
.message li:nth-child(7n + 3) p.point {
  background-color: #e53936;
}
.message li:nth-child(7n + 4) p.point {
  background-color: #ffab12;
}
.message li:nth-child(7n + 5) p.point {
  background-color: #ed5b00;
}
.message li:nth-child(7n + 6) p.point {
  background-color: #03bfa6;
}
</style>
